<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">
    <input type="text" v-model="words">
    <input type="text" v-model="person.name">
    <input type="text" v-model="person.age">
</div>
<script src="../../javascript//vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data() {
            return {
                person: {
                    name: "陶品奇",
                    age: 22,
                },
                words: "helloVue"
            }
        },
        watch: {
            // 监听words属性的变化
            words: {
                handler(newValue, oldValue) {
                    console.log(`新值是${newValue},旧值是${oldValue}`)
                },
            },
            //监听person对象（开启深度监听）
            person: {
                immediate: true,//立即监听
                deep: true,//深度监听
                handler(newValue, oldValue) { //对象变化时执行handler函数
                    console.log(newValue,oldValue)
                }
            }

        }
    })
</script>
</body>

</html>